<template>
	<view class="bgIndex ">

		<view class="padding20 buildingInformation">

			<view class="">
				<view class="flex-between margin-top_40rpx">
					<view class=" ">
						任务类目
					</view>

					<view class="flex" @click="subTypeFn()">
						<text>{{classify}}</text>
						<uni-icons type="right" size="15"></uni-icons>
					</view>


				</view>
				<view class=" myNmae flex-between margin-top_40rpx ">
					<view class=" ">
						标题
					</view>
					<view class="">
						<input class="uni-input" v-model="form.title" placeholder="请填写标题" />
					</view>


				</view>
				<view class=" myNmae flex-between margin-top_40rpx ">
					<view class=" ">
						副标题
					</view>
					<view class="">
						<input class="uni-input" v-model="form.vice_title" placeholder="请填写副标题" />
					</view>


				</view>
				<view class="flex-between margin-top_40rpx">
					<view class=" ">
						语音描述
					</view>

					<view class="flex" @click="voiceRecordingFn()">
						<text>{{form.describe_speech?'语音已上传':voiceDescription}}</text>
						<uni-icons type="right" size="15"></uni-icons>
					</view>


				</view>
				<view class="flex-between margin-top_40rpx" @click="location()">
					<view class=" ">
						地点
					</view>

					<view class="flex">
						<text>{{place?place:'请选择活动地点'}}</text>
						<uni-icons type="right" size="15"></uni-icons>
					</view>


				</view>


				<view class="flex-between margin-top_40rpx">
					<view class="">
						你的性别
					</view>
					<radio-group v-model="form.sex" name="apply" @change="radioChange">
						<label class="m-right10">
							<radio :checked="form.sex ==0" class="min-radio" value="1" color="#67C23A" />
							<text>性别不限</text>
						</label>
						<label class="m-right10">
							<radio :checked="form.sex ==1" class="min-radio" value="1" color="#67C23A" />
							<text>男</text>
						</label>
						<label>
							<radio :checked="form.sex ==2" class="min-radio" value="2" color="#67C23A" />
							<text>女</text>
						</label>
					</radio-group>
				</view>

				<!-- <view class="flex-between margin-top_40rpx ">
					<view class="font-weight_bold ">
						接单时间段
					</view>
					<view style="color: rgb(153, 153, 153);" @click="calendarFn()" class="flex">
			
						{{timeDec}}
				       <uni-icons  type="right" color="rgb(153, 153, 153)" size="15"></uni-icons>
					</view>
				
				</view> -->
				<view class="myNmae flex-between margin-top_60rpx">
					<text style="min-width: 150rpx;">接单时间段</text>

					<view class="flex-align-center-justify-start  color6">

						<view class="flex">
							<xp-picker placeholder='接单时间段开始' v-model="startTimes" mode='ymdhi' ref="picker1"
								@confirm="confirm1" />

							<uni-icons @click="show1" type="right" color='#333' size="16"></uni-icons>
						</view>



					</view>


				</view>

				<view class="myNmae flex-between margin-top_60rpx">
					<text style="min-width: 150rpx;">接单时间段</text>

					<view class="flex-align-center-justify-start  color6">
						<!-- <view class="" v-if="yeartime1&&monthtime1&&daytime1">
				    		{{ yeartime1 }}
				    		<text>-</text>
				    		{{ monthtime1 }}
				    		<text>-</text>
				    		{{ daytime1 }}
				    		<uni-icons type="right" color='#333' size="16"></uni-icons>
				    	</view> -->
						<view class="flex">
							<xp-picker placeholder='接单时间段结束' v-model="endTimes" mode='ymdhi' ref="picker"
								@confirm="confirmS" />

							<uni-icons @click="show" type="right" color='#333' size="16"></uni-icons>
						</view>



					</view>


				</view>
				<!-- <term-picker :visable.sync="pickerVisable" :defaultDate="defaultDate" @confirm="confirmS"></term-picker> -->

				<view class=" myNmae flex-between margin-top_40rpx ">
					<view class=" ">
						服务价格
					</view>
					<view class="">
						<input class="uni-input" type="number" v-model="form.price"
							:placeholder="'请填输入价格('+currency_name+')'" />
					</view>


				</view>
				<view class="margin_20rpx_0" v-if="basicConfiguration&&basicConfiguration.recharge_ratio">
					<text>注明:采用平台货币形式，出售服务完成方可提现， <text style="color: red;">1</text>块钱等于<text
							style="color: red;">{{basicConfiguration.recharge_ratio}}</text>{{currency_name}}
					</text>
				</view>
				<view class=" myNmae flex-between margin-top_40rpx">
					<view class="">
						服务时长
					</view>
					<view class="">
						<input class="uni-input" type="number" v-model="form.work_time" placeholder="请输入服务时长(分钟)" />
					</view>

				</view>





			</view>

		</view>

		<view class="padding20 margin-top_20rpx" style="background-color: #fff;">
			<view class="personalTags">
				<view>
					<view class="font-weight_bold">
						需求标签
					</view>
					<view class="tag_container">
						<zy-tag ref="zyAddTag" addible closable @delete="deleteTag(item)"
							v-for="(item, index) in tagAddList" :text="item"></zy-tag>
						<view class="zy_tag_add"><text class="zy_tag_add_input" @click="addTag()">+ 自定义</text></view>
					</view>
				</view>
			</view>

		</view>
		<view class="padding20 margin-top_20rpx" style="background-color: #fff;">
			<view class="font-weight_bold">
				描述信息
			</view>

			<view class="textarea-box">
				<piaoyiEditor :values="form.describe" :maxlength="3000" @changes="saveContens" :photoUrl="photoUrl"
					:api="api" :name="name" />
				<!-- 	<lRichTextEditor v-model="form.describe" @change="getChange">
				</lRichTextEditor> -->
				<!-- 	<textarea v-model="form.describe" placeholder="请输入自己的个人优势" maxlength="50" @input="descInput"
					style="height: 150rpx;" />
				<view class="textarea-color">{{ remnant }}/50</view> -->
			</view>
			<sunui-upimg1 class="margin-top_20rpx" :border="'1px dashed #bfbfbf'" :formData="imgFormData"
				:storageMode="storageMode" :header="header" :size="['200rpx', '200rpx']" btnName="上传封面"
				:uploadServerUrl="upPicUrl" ref="selectimgandupload" @uploaded="imgLoaded" @change="imgsChange"
				:maxFileNumber="1"><template v-slot:icon>
					<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
				</template></sunui-upimg1>

			<sunui-upimg1 class="margin-top_20rpx" :border="'1px dashed #bfbfbf'" :formData="imgFormData1"
				:storageMode="storageMode" :header="header" :size="['200rpx', '200rpx']" btnName="上传背景详情图"
				:uploadServerUrl="upPicUrl1" ref="selectimgandupload1" @uploaded="imgLoaded1" @change="imgsChange1"
				:maxFileNumber="5"><template v-slot:icon>
					<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
				</template></sunui-upimg1>

		</view>

		<view class="release flex" @click="releaseFn()">
			立即发布
		</view>
		<view class="" style="height: 20rpx;">

		</view>
		<!-- 添加标签 弹出框 -->
		<sunui-popup ref="pop">
			<template v-slot:content>

				<view class="v-pop-cls flex-column">
					<view class="text-align_right " style="width: 90%;">


						<uni-icons type="closeempty" @click="closeTag()" size="20"></uni-icons>

					</view>
					<text class="margin-right_50rpx">添加标签</text>
					<input placeholder="请输入2到6个字标签" v-model="singleLabel" />
					<view class="flex add" @click="singleLabelClick()">添加</view>
				</view>
			</template>
		</sunui-popup>
		<sunui-popup ref="modifyEmployeeInfo">
			<template v-slot:content>

				<view class="moreActiveButton" style="z-index: 9999;position: relative;">
					<soundRecording @confirm='confirm' @cancel="cancel"></soundRecording>
				</view>

			</template>
		</sunui-popup>
	</view>
</template>

<script>
	import soundRecording from '@/components/sound-recording/sound-recording.vue'
	import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
	import zyTag from '@/uni_modules/zy-tag/components/zy-tag/zy-tag.vue'
	export default {
		components: {
			zyTag,
			piaoyiEditor,
			soundRecording
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				startTime: '',
				endTime: '',
				startTimes: '',
				endTimes: '',
				currency_name: uni.getStorageSync("system").currency_name,
				photoUrl: '111',
				userInfo: uni.getStorageSync("userInfo"),
				classify: '请选择类目',
				place: '请选择活动地点',
				gender: '请选择搭子性别',
				timeDec: '接单时间段',
				deadline: '请选择结束时间',
				voiceDescription: '点击上传音频',
				serviceDuration: '服务时长',
				api: '11',
				name: 'file',
				pickerVisable: false,
				form: {
					// 一级类目
					pid_tab: '',
					// 二级类目
					son_tab: '',
					// 标题
					title: '',
					// 描述
					describe: '',
					// 性别
					sex: '0',
					// 地址
					address: '',
					// 接单时间段
					service_time: '',
					// 语音
					describe_speech: '',
					// 背景图
					content_img: '',
					// 服务时间
					work_time: '',
					// 标签
					label: '',
					// 价格
					price: '',
					// 副标题
					vice_title: '',
					dimension: '',
					longitude: '',
					cover_img: ''


				},
				defaultDate: [currentDate, currentDate],
				deliveryTimeList: [{
						text: '4小时',
						value: "4小时"
					},
					{
						text: '8小时',
						value: "8小时"
					},
					{
						text: '12小时',
						value: "12小时"
					},
					{
						text: '24小时',
						value: "24小时"
					}
				],
				imgFormData: null,
				storageMode: "2",
				header: null,
				upPicUrl: null,
				img: [],
				imgStr: [],

				imgFormData1: null,


				upPicUrl1: null,
				img1: [],
				imgStr1: [],

				tagAddList: [],
				singleLabel: '',
				remnant: 0,
				isEdit: false,
				basicConfiguration: null,
				userInfoObj:null

			}
		},
		onLoad(options) {
			this.basicConfigurationFn()
			this.userInfoFn()
			if (options.id) {


               
				const decodedData = {};
				for (const key in options) {
					// 解码当前字段的值
					const decodedValue = decodeURIComponent(options[key]);

					// 将解码后的值存储到新的对象中
					decodedData[key] = decodedValue;
				}


				this.form.id = decodedData.id
				this.$sun.assignObject(this.form, {
					...decodedData
				})
				// this.timeDec = this.form.service_time
				
				this.startTimes=this.form.service_time.split('/')[0];
				 this.endTimes=this.form.service_time.split('/')[1];
				this.init(this.form)
				this.place = this.form.address
				console.log(this.form)
				this.isEdit = true
				this.classify = decodedData.name

				// this.form.service_time = this.startTime + '/' + this.endTime
			}
			this.api = this.$api.upload
			if (uni.getStorageSync("speech")) {
				this.$sun.toast('语音上传成功' + uni.getStorageSync("speech"), 'none')

				this.form.describe_speech = uni.getStorageSync("speech")

				setTimeout(() => {
					uni.removeStorageSync('speech')
				}, 1000)
			}
		},
		onShow() {
			this.basicConfigurationFn()
			this.$at.releaseKey('submit');
			if (uni.getStorageSync("tabClassIfy")) {
				this.classify = JSON.parse(JSON.stringify(uni.getStorageSync("tabClassIfy"))).name
				this.form.pid_tab = uni.getStorageSync("tabClassIfy").pid
				this.form.son_tab = uni.getStorageSync("tabClassIfy").id
			}
			if (uni.getStorageSync("speech")) {
				this.$sun.toast('语音上传成功' + uni.getStorageSync("speech"), 'none')

				this.form.describe_speech = uni.getStorageSync("speech")

				setTimeout(() => {
					uni.removeStorageSync('speech')
				}, 1000)
			}
		},
		methods: {
			async userInfoFn() {
				const result = await this.$http.post({
					url: this.$api.userInfo,
					data: {
			
						// id:this.userInfo.id
			
			
					},
					headers: {
						'Authorization': this.userInfo.token
					}
			
				})
			
				if (result.code == 0) {
					console.log('data', result.data);
					wx.setStorageSync('userInfo', result.data);
					this.userInfoObj=result.data
				
					
			
				}
			},
			radioChange(e) {
			
				console.log(e)
				this.form.sex = e.detail.value
			
			},
			
			confirm1(e) {
				console.log(e.value)


				this.startTime = this.formatDateTime(e.value)

				this.startTimes = e.value
				console.log(this.startTime)
			},
			confirmS(e) {
				this.endTime = this.formatDateTime(e.value)
				this.endTimes = e.value
				console.log(this.endTime)
			},

			formatDateTime(inputDateTime) {
				// 分割日期时间字符串
				let parts = inputDateTime.split(' ');

				// parts[0] 是日期部分 '2024-07-19'
				// parts[1] 是时间部分 '02:23'

				// 提取月份和日期
				let datePart = parts[0].slice(5); // 取 '07-19'

				// 格式化后的字符串
				let formattedString = `${datePart} ${parts[1]}`;

				return formattedString;
			},
			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},

			calendarFn() {
				this.pickerVisable = true
			},
			cancel() {
				setTimeout(() => {
					this.$refs.modifyEmployeeInfo.close()
				}, 500)

			},
			confirm(e) {
				
				if (e) {
					this.$sun.toast('语音上传成功', 'none')
					this.voiceDescription = '语音上传完成'
					this.form.describe_speech = e
					setTimeout(() => {
						this.$refs.modifyEmployeeInfo.close()
					}, 100)
				} else {
					this.$sun.toast('语音上传失败', 'none')

					setTimeout(() => {
						this.$refs.modifyEmployeeInfo.close()
					}, 100)
				}
			},

			voiceRecordingFn() {
			
				// this.$refs.modifyEmployeeInfo.show({
				// 	anim: 'bottom',
				// 	position: 'bottom',
				// 	shadeClose: false, //false使用户不能点击其它关闭页面
				// 	topclose: false,
				// 	zIndex: 1000
			
				// });
				
				// 原来是录制语音现在改为上传语音
				// this.$sun.navGo('/pagesA/personalCenter/voiceRecording')
				
				// 上传语音
				
					//classify 1:全程解说 2：背景音乐
					//选择音频文件
					let that = this;
					uni.chooseFile({
						count: 1, //选取的文件个数限制
						extension: ['.mp3,.m4a'], //可定义允许哪些后缀的文件可被选择
						success: (res) => {
							let tempFiles = res.tempFiles;
							
							
							that.filePath = tempFiles[0].path;
							console.log(tempFiles[0].name)
							let markIndex = tempFiles[0].name.lastIndexOf('.');
						
							let suffix = tempFiles[0].name.substring(markIndex);
						
				           
							
							setTimeout(()=>{
								if(suffix!='.mp3'&&suffix!='.m4a'){
									uni.showToast({
										duration:1000,
										title:'请上传mp3或者.m4a后缀文件',
										icon: 'none'
									})
									
									// that.$sun.toast('请上传mp3或者.m4a后缀文件','none')
									
									return;
									
								}
								// that.formData.key = new Date().getTime() + Math.floor(Math.random() * 150) + '_.' +
								// 	tempFiles[0].name;
								
								uni.showLoading({
									title: '上传中...'
								});
				
								uni.uploadFile({
									name: 'file', //文件上传的name值
									url: this.$api.upload, //接口地址
									// formData: that.formData, //上传额外携带的参数
									filePath: tempFiles[0].path, //临时路径
									success: uploadFileRes => {
								         	uploadFileRes = JSON.parse(uploadFileRes.data);
										/* uni.showModal({
											content: 'uploadFileRes==>'+uploadFileRes.statusCode+(uploadFileRes.statusCode==200),
											
										}); */
								
										// return;
								
										if (uploadFileRes.code != 0) {
											uni.showToast({
												title: '上传失败 : ' + uploadFileRes.data,
												icon: 'none'
											});
											 uni.hideLoading();
										} else {
											 uni.hideLoading();
										  this.$sun.toast('上传成功', 'none')
										   this.form.describe_speech=uploadFileRes.data.url
								         
										}
									},
									fail: e => {
										uni.showToast({
											title: '上传失败==>' + e,
											icon: 'none'
										});
									}
								});
							},1000)
						}
					});
				
				
			
			},
			
			async basicConfigurationFn() {
				const result = await this.$http.post({
					url: this.$api.config,
					data: {


					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})
				if (result.code == 0) {
					console.log(result)
					wx.setStorageSync('system', result.data);
					this.basicConfiguration = result.data
					
					if( uni.getStorageSync("userInfo").level_id==1?(!Number(this.basicConfiguration.service_number)):(!Number(this.basicConfiguration.level_service_number))){
						this.$sun.toast("发布服务已达上限", 'none')
						this.$at.releaseKey('submit');
					}
					else if( uni.getStorageSync("userInfo").level_id==1?( Number(uni.getStorageSync("userInfo").serviceNumber)>=Number(this.basicConfiguration.service_number)): ( Number(uni.getStorageSync("userInfo").serviceNumber)>=Number(this.basicConfiguration.level_service_number)) ){
						this.$sun.toast("发布服务已达上限", 'none')
						this.$at.releaseKey('submit');
					}

				}
			},
			init(options) {
				this.$nextTick(() => {

					const cover_imgList = options.cover_img.split(',').map((item) => item.trim());
					console.log(cover_imgList)
					this.$refs.selectimgandupload1.setItems(cover_imgList);

					this.$refs.selectimgandupload.setItems([options.content_img]);

				})
				this.tagAddList = this.form.label.split(',')


			},

			releaseFn() {
				if (this.userInfo.disable == 0) {
					this.$sun.toast('该用户已被拉黑', 'none')
				}else{
					console.log(this.form)
					this.form.service_time = this.startTimes + '/' + this.endTimes
					if (uni.getStorageSync("userInfo").real_name||(!Number(this.basicConfiguration.isOpen_idCard_authentication)) ) {
						this.$at.uniDoFunc({
							key: 'submit',
							success: async () => {
								this.$at.lockKey('submit');
								if( this.userInfoObj.level_id==1?(!Number(this.basicConfiguration.service_number)):(!Number(this.basicConfiguration.level_service_number))){
									this.$sun.toast("发布服务已达上限", 'none')
									this.$at.releaseKey('submit');
								}
								else if( this.userInfoObj.level_id==1?( Number(this.userInfoObj.serviceNumber)>=Number(this.basicConfiguration.service_number)): ( Number(this.userInfoObj.serviceNumber)>=Number(this.basicConfiguration.level_service_number)) ){
									this.$sun.toast("发布服务已达上限", 'none')
									this.$at.releaseKey('submit');
								}
								// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
								else if (!this.form.title) {
									this.$sun.toast("请填写标题", 'none')
									this.$at.releaseKey('submit');
								} else if (!this.form.label) {
									this.$sun.toast("请选择标签", 'none')
									this.$at.releaseKey('submit');
								} else if (!this.form.describe) {
									this.$sun.toast("请填写富文本描述", 'none')
									this.$at.releaseKey('submit');
								} else if (!this.form.pid_tab && this.form.son_tab) {
									this.$sun.toast("请选择分类类型", 'none')
									this.$at.releaseKey('submit');
								} else if (!this.form.service_time) {
									this.$sun.toast("请填写接单时间段", 'none')
									this.$at.releaseKey('submit');
								} else if (!this.form.price) {
									this.$sun.toast("请填写服务价格", 'none')
									this.$at.releaseKey('submit');
								} else if (!this.form.work_time) {
									this.$sun.toast("请填写服务时间", 'none')
									this.$at.releaseKey('submit');
								} else if (!this.form.address) {
									this.$sun.toast("请选择活动地点", 'none')
									this.$at.releaseKey('submit');
								} else if (!this.form.content_img) {
									this.$sun.toast("请上传详情图", 'none')
									this.$at.releaseKey('submit');
								} else {
									console.log(this.form)
					
									const saveOrUpdate = this.isEdit ? this.$api.editService : this.$api
										.addService;
									const result = await this.$http.post({
										url: saveOrUpdate,
										data: {
											...this.form
					
										},
										headers: {
											'Authorization': this.userInfo.token
										}
					
									})
									if (result.code == 0) {
					
										this.$sun.toast(result.message, 'none')
										uni.removeStorageSync('tabClassIfy')
										setTimeout(() => {
											this.$sun.navBack()
										}, 500)
					
					
					
									} else {
										this.$sun.toast(result.message, 'none')
									}
					
									this.$at.releaseKey('submit');
								}
							}
						});
					} else {
						this.$sun.toast('请实名认证后在来发布','none')
						setTimeout(() => {
							this.$sun.navGo('/pagesA/personalCenter/informationIdCard')
											
						}, 1000)
					}
				}
				


			},
			deliveryTimeFn(e) {
				this.form.service_time = this.deliveryTimeList[e.detail.value].value

				this.timeDec = this.deliveryTimeList[e.detail.value].text
			},
			location() {
				this.$sun.chooseLocation({
					lat: this.userInfo.dimension,
					lng: this.userInfo.longitude
				}).then((res) => {
					console.log(res)
					this.form.address =res.address;
				    this.place = res.address;
					this.form.dimension = res.latitude;
					this.form.longitude = res.longitude;
				})
				
				
			},
			saveContens(e) {
				console.log(e)
				this.form.describe = e.html
			},
			// 备注
			descInput(e) {
				this.remnant = e.detail.value.length;
				if (this.remnant >= 50) {
					this.$sun.toast('说明字数已达上限');
				}
			},
			// ‘添加标签’弹出框
			addTag() {
				this.$refs.pop.show({
					anim: 'center',
					shadeClose: false,
					topclose: false
				});
			},
			// 弹窗——添加/修改单个标签
			singleLabelClick() {
				if (!this.singleLabel) {
					this.$sun.toast('请先输入标签');
				} else {
					this.updateTags();
				}
			},
			// 技师员工标签添加修改
			async updateTags() {
				// const result = await this.$http.put({
				// 	url: this.$api.updatePersonalTags,
				// 	data: {
				// 		id: '2', //修改时传值
				// 		label: this.singleLabel //添加的标签值
				// 	}
				// });


				this.$sun.toast('添加成功！');
				this.addTag2()
				this.closeTag();
			},


			// 关闭 ‘添加标签’弹出框
			closeTag() {
				this.$refs.pop.close();
			},
			subTypeFn() {

				this.$sun.navGo('/pagesB/index/classifyAll', {
					type: 3
				})
			},
			//删除标签
			deleteTag(item) {
				console.log(item);
				// 2种删除方式
				// this.tagDeleteList.splice(this.tagDeleteList.indexOf(item), 1);
				this.tagAddList = this.tagAddList.filter(o => {
					return o !== item;
				});
			},
			//添加标签input框回车事件
			addTag2() {
				this.tagAddList.push(this.singleLabel);
				this.form.label = this.tagAddList.join(",")
				this.singleLabel = '';
			},
			// 上传图片返回
			imgLoaded(e) {


				this.img = [];
				for (let i = 0; i < e.length; i++) {
					this.img.push(e[i].url);
				}


				this.imgStr = this.img

				this.form.content_img = this.imgStr.length === 1 ? this.imgStr[0].toString() : this.imgStr
					.join(',');
			},
			imgsChange(file) {

				console.log('上传发生改变this.storageMode1111============', this.storageMode, '参数file', file);


				if (file.length) {
					this.upPicUrl = this.$api.upload;
					let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
					this.imgFormData = {
						// file: file,
						getsize: file.size,
						getContentType: ['image/png', 'image/jpeg'],
						getoriginalfilename: filesNmae,
						getName: filesNmae
					};
					this.$nextTick(() => {
						this.$refs.selectimgandupload.upload(); //图片上传
					});
				} else {
					this.form.content_img = '',
						this.imgStr = []
				}
				// this.niuyunLoop(file,0)

			},



			// 上传图片返回
			imgLoaded1(e) {

				console.log(e)
				this.img1 = [];
				for (let i = 0; i < e.length; i++) {
					this.img1.push(e[i].url);
				}


				this.imgStr1 = this.img1
				console.log(this.imgStr1, 'this.imgStr1')
				this.form.cover_img = this.imgStr1.length === 1 ? this.imgStr1[0].toString() : this.imgStr1
					.join(',');
			},
			imgsChange1(file) {




				if (file.length) {
					this.upPicUrl1 = this.$api.upload;
					let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
					this.imgFormData1 = {
						file: file,
						getsize: file.size,
						getContentType: ['image/png', 'image/jpeg'],
						getoriginalfilename: filesNmae,
						getName: filesNmae
					};
					this.$nextTick(() => {
						this.$refs.selectimgandupload1.upload(); //图片上传
					});
				} else {
					this.form.cover_img = '',
						this.imgStr1 = []
				}
				// this.niuyunLoop(file,0)

			},
		}
	}
</script>

<style lang="less" scoped>
	.bgIndex {
		.bg {

			height: 392.42rpx;
		}

		.buildingInformation {
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			margin-top: -20rpx;
			z-index: 50;
			position: relative;
			background: rgb(255, 255, 255);

			.myNmae {

				background-color: #fff;
				min-width: 50rpx;

				.avatar {
					width: 84rpx;
					height: 84rpx;
				}

				input {
					text-align: right;
				}

				.backgroundImg {

					height: 154rpx;


				}

			}
		}

		.personalTags {
			margin: 36rpx 0;

			.tag_container {
				margin-top: 36rpx;
				display: flex;
				align-items: center;
				flex-direction: row;
				// justify-content: space-between;
				flex-wrap: wrap;
			}

			.zy_tag_add {
				width: 150rpx;

				height: 50rpx; //medium：45rpx；small：40rpx；mini：35rpx
				padding: 5rpx 15rpx;
				margin: 5rpx 8rpx;
				border: 2rpx solid rgb(237, 237, 237);
				border-radius: 10rpx;
				text-align: center;
			}
		}

		.release {
			margin: 0 20rpx;
			height: 102rpx;
			border-radius: 142rpx;
			color: #fff;
			background: rgb(120, 93, 246);
		}

		.textarea-box {
			margin-top: 24rpx;
			border: 2rpx dashed #1e6ceb;
			background: #fff;
			padding: 30rpx;
			border-radius: 20rpx;

			.textarea-color {
				text-align: right;
				color: #999;
			}
		}

		// “添加标签” 弹出框
		.v-pop-cls {
			padding: 46rpx 0 88rpx;
			width: 710rpx;
			height: auto;
			position: relative;
			border-radius: 20rpx;
			background: #fff;

			image {
				width: 52rpx;
				height: 52rpx;
				position: absolute;
				padding: 30rpx;
				top: 0rpx;
				right: 0rpx;
			}

			text {
				color: #000;
				font-size: 36rpx;
			}

			input {
				// text-align: center;
				padding: 0 20rpx;
				width: 608rpx;
				height: 94rpx;
				margin: 62rpx 0;
				border-radius: 20rpx;
				background: #f5f5f5;
			}

			.add {
				width: 638rpx;
				height: 88rpx;
				background: #1890ff;
				color: #fff;
				font-size: 32rpx;
			}
		}
	}
</style>